<template>
    <div class="common-layout">
        <el-container>
            <!--菜单组件-->
            <el-header>
                <div class="leftDiv">
                    <img src="../../assets/behindlogo.png">
                    <span class="title">在线学习平台后台管理</span>
                </div>
                <div class="rightDiv">
                    <el-button type="danger" @click="logout">
                        <el-icon>
                            <SwitchButton/>
                        </el-icon>
                        <span>登出</span></el-button>
                </div>
            </el-header>
            <el-container class="mineContainer" style="overflow: hidden">
                <el-aside width="220px">
                    <el-row class="tac">
                        <el-col :span="12">
                            <el-menu
                                    active-text-color="#ffd04b"
                                    background-color="#545c64"
                                    class="el-menu-vertical-demo"
                                    default-active="0"
                                    text-color="#fff"
                                    @open="handleOpen"
                                    @close="handleClose"
                            >
                                <el-menu-item index="0" @click="jumpToHome">
                                    <el-icon>
                                        <HomeFilled/>
                                    </el-icon>
                                    <span>主页</span>
                                </el-menu-item>
                                <el-sub-menu index="1">
                                    <template #title>
                                        <el-icon>
                                            <setting/>
                                        </el-icon>
                                        <span>人员管理</span>
                                    </template>
                                    <el-menu-item index="1-1" @click="jumpToStudent">
                                        <el-icon>
                                            <User/>
                                        </el-icon>
                                        <span>普通用户管理</span></el-menu-item>
                                    <el-menu-item index="1-2" @click="jumpToTeacher">
                                        <el-icon>
                                            <User/>
                                        </el-icon>
                                        <span>认证用户管理</span></el-menu-item>
                                    <el-menu-item index="1-3" @click="jumpToTeacherRegister">
                                        <el-icon>
                                            <User/>
                                        </el-icon>
                                        <span>学园认证审核</span></el-menu-item>
                                </el-sub-menu>

                                <el-sub-menu index="4">
                                    <template #title>
                                        <el-icon>
                                            <setting/>
                                        </el-icon>
                                        <span>课程管理</span>
                                    </template>
                                    <el-menu-item index="4-1" @click="jumpToCourse">
                                        <el-icon>
                                            <VideoCamera/>
                                        </el-icon>
                                        <span>上线课程</span>
                                    </el-menu-item>
                                    <el-menu-item index="4-2" @click="jumpToExamine">
                                        <el-icon>
                                            <Loading/>
                                        </el-icon>
                                        <span>上传与修改审核</span>
                                    </el-menu-item>
                                    <el-menu-item index="4-3" @click="jumpToDelete">
                                        <el-icon>
                                            <Delete/>
                                        </el-icon>
                                        <span>删除审核</span>
                                    </el-menu-item>
                                </el-sub-menu>
                                <el-menu-item index="5" @click="jumpRecommend">
                                    <el-icon>
                                        <Setting/>
                                    </el-icon>
                                    <span>推荐强度管理</span>
                                </el-menu-item>

                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main  >
<!--                    style="overflow: hidden"-->
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script setup>
    import {ref} from 'vue'
    import {useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
        HomeFilled,
        User, Delete, SwitchButton, VideoCamera, Loading
    } from '@element-plus/icons-vue'

    const store = useStore();
    // const url = 'https://cn.bing.com/images/search?q=logo%E5%9B%BE&FORM=IQFRBA&id=99C2EDBB21F1B18BB6D09A8BA283040D0CB72506'
    const isCollapse = ref(true)
    const handleOpen = (key, keyPath) => {
        console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
        console.log(key, keyPath)
    }
    const router = useRouter();
    const jumpToCourse = () => {
        router.push({path: '/adminMine/adminCourse'})
    };
    const jumpToStudent = () => {
        router.push({path: '/adminMine/adminStudent'})
    };
    const jumpToTeacher = () => {
        router.push({path: '/adminMine/adminTeacher'})
    }
    const logout = () => {
        store.commit("setAdminStatus", false)
        router.push({path: '/adminLogin'})
    }
    const jumpToExamine = () => {
        router.push({path: '/adminMine/adminExamineCourse'})
    }
    const jumpToDelete = () => {
        router.push({path: '/adminMine/selectAllDeletingCourse'})
    }
    const jumpToHome = ()=>{
        router.push({path: '/adminMine/adminHome'})
    }
    const jumpToTeacherRegister = ()=>{
        router.push({path: '/adminMine/adminTeacherRegister'});
    }
    const jumpRecommend = ()=>{
        router.push({path:'/adminMine/adminRecommend'})
    }

</script>

<style scoped>
    .common-layout {
        height: 100%;
    }

    .el-container {
        height: 100%;
    }

    .tac {
        height: 100%;
    }

    .el-menu-vertical-demo {
        height: 100%;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 85vh;
    }

    .el-header {
        display: flex;
        background-color: #004a97;

        justify-content: space-between;
    }

    .leftDiv {
        display: flex;
        align-items: center;
    }

    .rightDiv {
        display: flex;
        align-items: center;
        margin-right: 50px;
    }

    img {
        height: 100%;
        margin-left: 50px;
    }

    .title {
        font-size: 20px;
        color: #d3dce6;
    }

</style>